<template>
  <div class="equipment-detail">
    <div class="page-header">
      <div class="header-left">
        <el-page-header @back="goBack" :content="equipmentInfo.device_name || '设备详情'"></el-page-header>
      </div>
      <!-- <div class="header-right">
        <el-button type="primary" @click="openDialog">编辑信息</el-button>
      </div> -->
    </div>

    <el-row :gutter="20">
      <el-col :span="24">
        <el-card v-loading="loading" class="info-card">
          <template #header>
            <div class="card-header">
              <h3>设备基本信息</h3>
            </div>
          </template>
          <el-row :gutter="20">
            <el-col :span="8">
              <div class="info-item">
                <span class="label">设备ID：</span>
                <span class="value">{{ equipmentInfo.device_id }}</span>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="info-item">
                <span class="label">设备名称：</span>
                <span class="value">{{ equipmentInfo.device_name }}</span>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="info-item">
                <span class="label">设备编号：</span>
                <span class="value">{{ equipmentInfo.device_number }}</span>
              </div>
            </el-col>
          </el-row>
          
          <el-row :gutter="20">
            <el-col :span="8">
              <div class="info-item">
                <span class="label">设备类型：</span>
                <span class="value">{{ equipmentInfo.device_type }}</span>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="info-item">
                <span class="label">品牌型号：</span>
                <span class="value">{{ equipmentInfo.brand_model }}</span>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="info-item">
                <span class="label">当前状态：</span>
                <span class="value">
                  <el-tag :type="getStatusType(equipmentInfo.status)">{{ equipmentInfo.status }}</el-tag>
                </span>
              </div>
            </el-col>
          </el-row>

          <el-row :gutter="20">
             <el-col :span="16">
              <div class="info-item">
                <span class="label">位置：</span>
                <span class="value">{{ locationDisplay }}</span>
              </div>
            </el-col>
          </el-row>
          
          <el-divider />

          <el-row :gutter="20">
            <el-col :span="8">
              <div class="info-item">
                <span class="label">购买日期：</span>
                <span class="value">{{ equipmentInfo.purchase_date }}</span>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="info-item">
                <span class="label">保修期至：</span>
                <span class="value">{{ equipmentInfo.warranty_end_date }}</span>
              </div>
            </el-col>
             <el-col :span="8">
              <div class="info-item">
                <span class="label">维保周期(天)：</span>
                <span class="value">{{ equipmentInfo.maintenance_cycle }}</span>
              </div>
            </el-col>
          </el-row>
          
          <el-row :gutter="20">
            <el-col :span="8">
              <div class="info-item">
                <span class="label">上次维保日期：</span>
                <span class="value">{{ equipmentInfo.last_maintenance_date }}</span>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="info-item">
                <span class="label">下次维保日期：</span>
                <span class="value">{{ nextMaintenanceDate }}</span>
              </div>
            </el-col>
          </el-row>
        </el-card>

        <el-card class="records-card">
          <template #header>
            <div class="card-header">
              <h3>维保记录</h3>
            </div>
          </template>
          <el-table :data="maintenanceRecords" border style="width: 100%">
            <el-table-column prop="maintenance_date" label="维保日期" width="150"></el-table-column>
            <el-table-column prop="maintenance_type" label="维保类型" width="120"></el-table-column>
            <el-table-column prop="content" label="维保内容"></el-table-column>
            <el-table-column prop="responsible_person" label="负责人" width="120"></el-table-column>
            <el-table-column prop="cost" label="费用(元)" width="120"></el-table-column>
          </el-table>
          <el-empty v-if="maintenanceRecords.length === 0" description="暂无维保记录"></el-empty>
        </el-card>
      </el-col>
    </el-row>

  </div>
</template>

<script>
import { getDeviceDetail } from '@/api/assets.js'

export default {
  name: 'EquipmentDetail',
  data() {
    return {
      loading: false,
      equipmentId: '',
      equipmentInfo: {},
      maintenanceRecords: [],
    }
  },
  computed: {
    locationDisplay() {
      if (!this.equipmentInfo) return ''
      if (this.equipmentInfo.location_desc) return this.equipmentInfo.location_desc
      
      const parts = []
      if (this.equipmentInfo.building) parts.push(this.equipmentInfo.building.name)
      if (this.equipmentInfo.floor) parts.push(`${this.equipmentInfo.floor.floor_number}层`)
      if (this.equipmentInfo.unit) parts.push(this.equipmentInfo.unit.unit_number)
      return parts.join(' - ')
    },
    nextMaintenanceDate() {
      if (!this.equipmentInfo.last_maintenance_date || !this.equipmentInfo.maintenance_cycle) {
        return '-'
      }
      const lastDate = new Date(this.equipmentInfo.last_maintenance_date)
      lastDate.setDate(lastDate.getDate() + this.equipmentInfo.maintenance_cycle)
      const year = lastDate.getFullYear()
      const month = ('0' + (lastDate.getMonth() + 1)).slice(-2)
      const day = ('0' + lastDate.getDate()).slice(-2)
      return `${year}-${month}-${day}`
    }
  },
  created() {
    this.equipmentId = this.$route.params.id
    this.fetchEquipmentInfo()
  },
  methods: {
    // 获取设备信息
    async fetchEquipmentInfo() {
      this.loading = true
      try {
        const response = await getDeviceDetail(this.equipmentId)
        if (response.data.code === 200) {
          this.equipmentInfo = response.data.data
          this.maintenanceRecords = this.equipmentInfo.maintenance_records || []
        } else {
          this.$message.error(response.data.message || '获取设备详情失败')
        }
      } catch (error) {
        this.$message.error('获取设备详情失败')
      } finally {
        this.loading = false
      }
    },
    // 返回上一页
    goBack() {
      this.$router.push('/admin/assets/equipmentlist')
    },
    // 打开编辑对话框 (暂未实现)
    openDialog() {
      this.$message.info('编辑功能待开发')
    },
    // 获取设备状态类型
    getStatusType(status) {
      const statusMap = {
        '正常': 'success',
        '故障': 'danger',
        '维修中': 'warning',
        '报废': 'info'
      }
      return statusMap[status] || 'info'
    }
  }
}
</script>

<style scoped>
.equipment-detail {
  padding: 20px;
}
.page-header {
  margin-bottom: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.info-card, .records-card, .alarms-card {
  margin-bottom: 20px;
}
.card-header {
  margin-bottom: 20px;
  border-bottom: 1px solid #eee;
  padding-bottom: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.info-item {
  margin-bottom: 18px;
  font-size: 14px;
}
.label {
  color: #606266;
  font-weight: bold;
}
.value {
  margin-left: 5px;
}
.el-timeline {
  padding-left: 10px;
}
.el-empty {
  padding: 20px 0;
}
</style> 